<template>
    <div class="infoSales-container whiteContainer boederSet">
      <div class="infoSales-container-item">
        <circle-compent :detailCatagrayCount="detailCatagrayCount" :detailProductCount="detailProductCount"
          :detailOnLine="detailOnLine" :detailOffLine="detailOffLine" :titleName="titleName"></circle-compent>
      </div>
      <div class="infoSales-container-item boederSet">
        <div class="titleHeader">销售趋势</div>
        <div id="saleDetailSummaryChartS" style="height: 300px"></div>
      </div>
      <div class="infoSales-container-item boederSet">
        <div class="titleHeader">
          价格走势
        </div>
        <div id="priceTrendS" ref="priceTrendS" style="height: 300px;width: 100%"></div>
      </div>
      <div class="infoSales-container-item boederSet">
        <div class="titleHeader space-between">
          <span>销售渠道分布</span>
          <el-form :inline="true" class="demo-form-inline single-form-inline locationDetail pickerOption" size="small">
            <el-form-item label="地区">
              <el-select v-model="country" placeholder="选择地区" @change="channelSel(searchDate)">
                <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="省份">
              <el-select v-model="province" placeholder="选择省份" @change="channelSel(searchDate)">
                <el-option v-for="(item,index) in provinceList" :key="index" :label="item" :value="item" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市">
              <el-select v-model="city" placeholder="选择城市" @change="channelSel(searchDate)">
                <el-option v-for="(item,index) in cityLists" :key="index" :label="item" :value="item" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="门店">
              <el-select v-model="shop" placeholder="选择门店" @change="channelSel(searchDate)">
                <el-option v-for="(item,index) in shopLists" :key="index" :label="item" :value="item" ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div id="salePointChartS" style="height: 300px"></div>
      </div>
      <div class="infoSales-container-item">
        <div v-if="shopIsAll" class="priceDetail">
          <div class="">
            <div class=" titleHeader" style="margin-bottom: 10px">
              <span style="font-weight: bold;">终端销售统计</span>
            </div>
            <el-table
              :data="priceTableData"
              style="width: 100%"
              size="mini">
              <el-table-column
                prop="shopName"
                label="门店名称">
              </el-table-column>
              <el-table-column
                sortable
                prop="amountCount"
                label="销售额(万元)">
              </el-table-column>
              <el-table-column
                sortable
                prop="salesCount"
                label="销售量(万件)">
              </el-table-column>
              <el-table-column
                prop="zhanBi"
                sortable
                label="销量在全品类中占比">
              </el-table-column>
            </el-table>
          </div>
          <div class="">
            <div class=" titleHeader">
              <span  style="font-weight: bold">渠道表现趋势</span>
            </div>
            <div id="salePriceChartS" style="height: 300px"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import CircleCompent from 'router/marketSale/compentSet/circleCompent'
  import * as opreator from 'api/getData'
  import mixins from 'utils/mixin'

  export default {
    name: "info-sales",
    mixins:[mixins.mixin],
    data() {
      return {
        shopIsAll: true,
        detailCatagrayCount: '',
        detailProductCount: '',
        detailOnLine: '',
        detailOffLine: '',
        titleName:[
          '线下终端数（个）',
          '渠道数（个）',
          '销售量（万件）',
          '销售额（万元）'
        ],
        salePrice:'',
        priceTableData:[],
      }
    },
    props:{
      productCode:{
        type: String,
        default: ''
      },
      searchDate:{
        type: Object,
        default: () => {}
      }
    },
    components:{
      CircleCompent
    },
    computed:{
      getXAxis(){
        return  Array.from(new Set([...this.salePrice.offlinePrice.map(item => item.deteTime),...this.salePrice.onlinePrice.map(item => item.deteTime)])).sort()
      }
    },
    mounted() {
      this.getDataSet()
    },
    methods: {
      getDataSet(){
        opreator.getSaleCircle({ ...this.searchDate, productCode:this.productCode }).then(res => {
          if('200' == res.code){
            let { shopCount = 0, channelCount = 0, amountCount = 0, salesCount = 0 } = res.data
            this.detailCatagrayCount = shopCount
            this.detailProductCount = channelCount
            this.detailOnLine = (salesCount/10000).toFixed(2)
            this.detailOffLine = (amountCount/10000).toFixed(2)
          }
        })
        this.fetchData(this.productCode,'S',this.searchDate)
        opreator.priceTrend({ ...this.searchDate, productCode: this.productCode }).then(res =>{
          this.salePrice = res.data || []
          let myChartPrice = this.$refs.priceTrendS && this.$echarts.init(this.$refs.priceTrendS);
          let options = {
            legend: {
              data:['线上均价','线下均价'],
              right:'20'
            },
            tooltip:{
              show:true,
              trigger: 'axis',
            },
            xAxis: {
              data: this.getXAxis
            },
            yAxis: [{
              name: '价格（元）',
              type: 'value'
            }, {
              name: '价格（元）',
              type: 'value'
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            series: [{
              name: '线上均价',
              type: 'line',
              yAxisIndex: 0,
              smooth:true,
              itemStyle: {
                color: '#B0ACEC'
              },
              data: this.salePrice.onlinePrice.map(item => item.onlinePrice.toFixed(2))
            }, {
              name: '线下均价',
              type: 'line',
              smooth:true,
              itemStyle: {
                color: '#9DD6F9'
              },
              yAxisIndex: 1,
              data: this.salePrice.offlinePrice.map(item => item.offlinePrice.toFixed(2))
            }]
          };
          myChartPrice && myChartPrice.setOption(options);
        })
      }
    },
    watch:{
      shop(newVal){
        if("全部" == newVal){
          this.priceTableData = []
          this.shopIsAll = true
        }else {
          this.shopIsAll = false
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .infoSales-container{
    display: flex;
    flex-direction: column;
    padding: 0 12px 12px 12px;
  }
  .titleHeader{
    font-weight: bold;
  }
  .itemContainer {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
  .itemTitle {
    background-color: #E8EEF4;
    height: 50px;
    padding: 5px 15px;
    line-height: 40px;
    font-weight: bold;

  }
  .infoSales-container-item{
    margin-bottom: 10px;
  }
  .priceDetail {
    display: flex;
    background-color: #fff;
    padding: 10px;
    > div {
      flex: 1;
      flex-basis: 50%;
      margin: 10px;
    }
  }

</style>
